<div class="layout_content graybg">
    <header class="demo-header" style="padding-top: 10px;">
        <div class="title3Left flt text-center">
            <a href="javascript:history.go(-1);">
                <img src="<?php echo WEBIMG; ?>/back.png" width="35px" height="33px">
            </a>
        </div>
        <div class="title3Middle flt text-center">购物车</div>
        <div class="title3Right flt text-center" id="bianji" data-action="0">编辑</div>
    </header>
    <div class="have-product">
        <?php $amount = 0; ?>
        <?php foreach ($skuIds as $key => $val) { ?>
            <?php
            $price = '0.00';
            $spec = '';
            foreach ($productData[$val['product_id']]['sku_info'] as $vv) {
                if ($vv['id'] == $key) {
                    $price = $vv['sellprice'];
                    $spec = $vv['attr'];
                }
            }
            $amount += $price * $val['num'];
            ?>
            <div class="cart-list">
                <div class="gouxuan" onclick="javascript:selectOne(this);">
                    <img style="width:22px;height:22px;" src="<?php echo WEBIMG; ?>/shopcart_chk_selected.png">
                    <input type="checkbox" name="cart_key[]" value="<?php echo $val['product_id'] . '_' . $key; ?>"
                           data-key="<?php echo $val['product_id'] . '_' . $key; ?>"
                           checked="true" autocomplete="off" style="display: none;">
                </div>
                <div class="page-product2-img">
                    <img src="<?php echo $productData[$val['product_id']]['icon_url']; ?>">
                </div>
                <div class="page-product-right" id="pro_id_<?php echo $val['product_id'] . '_' . $key; ?>">
                    <div class="page-product1-font1"><?php echo $productData[$val['product_id']]['name']; ?></div>
                    <div class="fontsize fontC"><?php echo $productData[$val['product_id']]['mass_packing']; ?></div>
                    <div class="fontsize fontC bianji-guige" rel="<?php echo $val['product_id']; ?>"
                         data-id="<?php echo $key; ?>" dom-id="<?php echo $val['product_id'] . '_' . $key; ?>">
                        <div class="pro_spec_txt"><?php echo $spec; ?></div>
                        <div class="pro_img" style="display: none;">
                            <?php echo $productData[$val['product_id']]['icon_url']; ?>
                        </div>
                        <div class="pro_name" style="display: none;">
                            <?php echo $productData[$val['product_id']]['name']; ?>
                        </div>
                        <div class="pro_price" style="display: none;">
                            <?php echo $productData[$val['product_id']]['channel_price']; ?>
                        </div>
                        <div class="pro_spec" style="display: none;">
                            <?php echo $productData[$val['product_id']]['mass_packing']; ?>
                        </div>
                        <div class="pro_num" style="display: none;">
                            <?php echo $val['num']; ?>
                        </div>
                        <div class="spec_list" style="display: none;">
                            <?php foreach ($productData[$val['product_id']]['sku_info'] as $vvv) { ?>
                                <div class="sku_box">
                                    <div class="flt shuxing-adjust">
                                        <p class="product"><?php echo $vvv['attr']; ?></p>
                                    </div>
                                    <div class="flt cart" style="width: 8%;padding-top:5px;">
                                        <label <?php if ($key == $vvv['id'])
                                            echo ' class="checked"'; ?> onclick="selectPro(this)"
                                                                        rel="<?php echo $vvv['product_id'] . '_' . $vvv['id']; ?>"
                                                                        title="<?php echo $vvv['attr']; ?>"
                                                                        price="<?php echo $vvv['sellprice']; ?>"></label>
                                    </div>
                                </div>
                            <?php } ?>
                        </div>
                    </div>
                    <div class="price bianji-price">
                        ￥<span><?php echo $price; ?></span>
                    </div>
                    <div class="bianji-jiajian disn" style="margin-top:5px;">
                        <span class="minus" onclick="javascript:num_down(this);">-</span>
                        <span class="proNum">
                            <input type="text" name="num" rel="<?php echo $val['product_id']; ?>"
                                   data-id="<?php echo $key; ?>" price="<?php echo $price; ?>"
                                   value="<?php echo $val['num']; ?>" autocomplete="off">
                        </span>
                        <span class="add" onclick="javascript:num_up(this);">+</span>
                    </div>
                </div>
                <div class="flt bianji-number" style="width: 7%;">
                    x<span><?php echo $val['num']; ?></span>
                </div>
            </div>
        <?php } ?>
        <div style="height:80px;width:100%;">&nbsp;</div>
        <div class="bottomBar" style="margin-bottom:0px;">
            <div id="selectAll" class="selectAll" rel="1" onclick="javascript:selectAll(this);">
                <img src="<?php echo WEBIMG; ?>/shopcart_chk_selected.png">全选
            </div>
            <div style="width:40%;float:left;padding:15px 0px;text-align: center;">
                合计:<span style="color:red;font-weight:bolder;">￥<span id="total"><?php echo $amount; ?></span></span>
            </div>
            <div class="tocount" id="toOrder">
                去结算
            </div>
        </div>
    </div>
    <div style="display: none;" class="no-product">
        <div class="cart-no"><img src="<?php echo WEBIMG; ?>/car_icon.png"/></div>
        <div class="fontC text-center">购物车是空的<span style="vertical-align: sub;">~</span></div>
        <a href="index.html">
            <div class="gobuy">去购物</div>
        </a>
    </div>

    <?php echo $footer; ?>

</div>

<div id="guige" style="">
    <div class="product-list newproduct" style="padding-bottom: 40px;border: none;">
        <div>
            <img src="" style="width: 70px;" id="pro_img"/>
            <div class="flt pline" style="line-height: 18px;padding-top: 0;">
                <p class="product" id="pro_name"></p>
                <p class="guige" id="pro_spec"></p>
                <p class="price">￥<span id="pro_price"></span></p>
                <input type="hidden" id="old_item" name="old_item" value="" autocomplete="off">
            </div>
        </div>
        <div class="shuxing" id="slectradio" style="overflow: auto;max-height: 78px;">
            <p class="product">属性：</p>
            <div id="spec_list"></div>
        </div>

        <div class="flt pline" style="width: 15%;border: none;">
            <p class="product">数量：</p>
        </div>
        <div class="flt text-right" style="width: 85%;padding-right: 3%;box-sizing: border-box;border: none;">
            <div class="inputNum" style="margin-bottom:5px;">
                <span class="minus minadd" onclick="javascript:num_down(this);return false;">-</span>
                <span class="proNum">
                    <input type="text" name="num" id="pro_num" value="1" autocomplete="off">
                    <input type="hidden" name="gid" id="pro_gid" value="" autocomplete="off">
                </span>
                <span class="add minadd" onclick="javascript:num_up(this);return false;">+</span>
            </div>
        </div>
    </div>
    <div class="foot-confirm text-center" onclick="changeCart();">确定</div>
    <div class="closeicon" onclick="CloseDiv();">
        <img src="<?php echo WEBIMG; ?>/dialog_close.png" style="width: 22px;"/>
    </div>
</div>
<div id="fade" class="black_overlay" onclick="CloseDiv();"></div>
<script type="text/javascript" src="<?php echo WEBJS . '/public.js'; ?>"></script>
<script>
    function selectOne(el) {
        if ($(el).find('input[name="cart_key[]"]').prop('checked')) {
            $(el).find('img').attr('src', '<?php echo WEBIMG . '/shopcart_chk_normal.png'?>');
            $(el).find('input[name="cart_key[]"]').prop('checked', false);
        } else {
            $(el).find('img').attr('src', '<?php echo WEBIMG . '/shopcart_chk_selected.png'?>');
            $(el).find('input[name="cart_key[]"]').prop('checked', true);
        }
        cartTotal();
    }
    function selectAll(el) {
        var rel = $(el).attr('rel');
        if (rel == 0) {
            $(el).attr('rel', '1');
            $(el).find('img').attr('src', '<?php echo WEBIMG . '/shopcart_chk_selected.png'?>');
            $('.gouxuan').each(function (index, ele) {
                if (!$(ele).find('input[name="cart_key[]"]').prop('checked')) {
                    $(ele).find('input[name="cart_key[]"]').prop('checked', true);
                    $(ele).find('img').attr('src', '<?php echo WEBIMG . '/shopcart_chk_selected.png'?>');
                }
            });
        } else if (rel == 1) {
            $(el).attr('rel', '0');
            $(el).find('img').attr('src', '<?php echo WEBIMG . '/shopcart_chk_normal.png'?>');
            $('.gouxuan').each(function (index, ele) {
                if ($(ele).find('input[name="cart_key[]"]').prop('checked')) {
                    $(ele).find('input[name="cart_key[]"]').prop('checked', false);
                    $(ele).find('img').attr('src', '<?php echo WEBIMG . '/shopcart_chk_normal.png'?>');
                }
            });
        }
        cartTotal();
    }
    function cartTotal() {
        var amount = 0;
        $('.gouxuan').each(function (index, ele) {
            if ($(ele).find('input[name="cart_key[]"]').prop('checked')) {
                var spec_key = $(ele).find('input[name="cart_key[]"]').val();
                var spec = spec_key.split('_');
                var price = 0;
                var num = 0;

                $('.bianji-jiajian .proNum input[name="num"]').each(function (position, dom) {
                    if ($(dom).attr('rel') == spec[0] && $(dom).attr('data-id') == spec[1]) {
                        price = $(dom).attr('price');
                        num = $(dom).val();
                    }
                })
                amount += parseFloat(price) * parseInt(num);
            }
        });
        $("#total").html(amount);
    }
    function num_down(el) {
        var num = parseInt($(el).siblings().find('input[name="num"]').val());
        if (num > 1) {
            num = num - 1;
        } else {
            num = 1;
        }
        $(el).siblings().find('input[name="num"]').val(num);

        var key = $(el).siblings().find('input[name="num"]').attr('rel') + '_' + $(el).siblings().find('input[name="num"]').attr('data-id');
        $('#pro_id_' + key).siblings('.bianji-number').find('span').html(num);
        cartTotal();
    }
    function num_up(el) {
        var num = parseInt($(el).siblings().find('input[name="num"]').val());
        if (num > 0) {
            num = num + 1;
        } else {
            num = 1;
        }
        $(el).siblings().find('input[name="num"]').val(num);

        var key = $(el).siblings().find('input[name="num"]').attr('rel') + '_' + $(el).siblings().find('input[name="num"]').attr('data-id');
        $('#pro_id_' + key).siblings('.bianji-number').find('span').html(num);
        cartTotal();
    }
    function selectPro(el) {
        var key = $(el).attr('rel');
        var title = $(el).attr('title');
        $("#spec_list .sku_box").find('label').removeClass('checked');
        $(el).addClass('checked');
        $(".inputNum .proNum").find('input[name="gid"]').val(key);
    }
    function changeCart() {
        var key = $("#old_item").val();
        var price = $("#spec_list").find('.checked').attr('price');
        var num = $('#pro_num').val();

        var spec_txt = $("#spec_list").find('.checked').attr('title');
        var spec_id = $("#spec_list").find('.checked').attr('rel');
        var spec = spec_id.split('_');

        $('#pro_id_' + key + ' .bianji-guige').attr('rel', spec[0]);
        $('#pro_id_' + key + ' .bianji-guige').attr('data-id', spec[1]);
        $('#pro_id_' + key + ' .bianji-guige .pro_spec_txt').html(spec_txt);

        $('#pro_id_' + key + ' .proNum input').attr('rel', spec[0]);
        $('#pro_id_' + key + ' .proNum input').attr('data-id', spec[1]);
        $('#pro_id_' + key + ' .proNum input').attr('price', price);
        $('#pro_id_' + key + ' .proNum input').val(num);

        $('#pro_id_' + key + ' .bianji-price span').html(price);
        $('#pro_id_' + key).siblings('.bianji-number').find('span').html(num);
        $('#pro_id_' + key + ' .bianji-guige').find('.spec_list').html($("#spec_list").html());

        $('input[data-key="' + key + '"]').val(spec_id);
        cartTotal();
        CloseDiv();
    }

    $(function () {
        $("#bianji").click(function () {
            var action = $(this).attr('data-action');
            if (action == 1) {
                $(this).text('编辑');
                $("#toOrder").removeClass('todel').html('去结算');
                var key = [];
                var num = [];
                $(".bianji-jiajian .proNum input[name='num']").each(function () {
                    var key_str = $(this).attr('rel') + '_' + $(this).attr('data-id');
                    key.push(key_str);
                    num.push($(this).val());
                });
                $.ajax({
                    url: '/ajax/cart/',
                    type: 'post',
                    dataType: 'json',
                    data: {'ajaxdata': 'changeCart', 'id': key, 'num': num},
                    success: function (response) {
                        $('.bianji-guige').toggleClass('bianji-radius');
                        $('.bianji-number,.bianji-price,.bianji-jiajian').toggleClass('disn');
                        $('.page-product2-img').toggleClass('padding-top1');
                        $('.gouxuan').toggleClass('padding-top2');

                        $("#bianji").attr('data-action', 0);
                    },
                    beforeSend: function () {
                    }
                });
            } else {
                $(this).text('完成');
                $("#toOrder").addClass('todel').html('删除');
                $('.bianji-guige').toggleClass('bianji-radius');
                $('.bianji-number,.bianji-price,.bianji-jiajian').toggleClass('disn');
                $('.page-product2-img').toggleClass('padding-top1');
                $('.gouxuan').toggleClass('padding-top2');
                $("#bianji").attr('data-action', 1);
            }
        });

        $(".bianji-guige").bind('click', function () {
            if ($(this).hasClass('bianji-radius')) {
                var dom_id = $(this).attr('dom-id');
                var gid = $(this).attr('rel');
                var id = $(this).attr('data-id');
                var spec_list = $(this).find('.spec_list').html();
                var pro_name = $(this).find('.pro_name').html();
                var pro_img = $(this).find('.pro_img').html();
                var pro_price = $(this).find('.pro_price').html();
                var pro_spec = $(this).find('.pro_spec').html();
                var pro_num = $("#pro_id_" + dom_id).find('.proNum input').val();

                $("#pro_gid").val(gid + '_' + id);
                $("#spec_list").html(spec_list);
                $("#pro_name").html(pro_name);
                $("#pro_price").html(pro_price);
                $("#pro_spec").html(pro_spec);
                $("#pro_img").attr('src', pro_img);
                $("#pro_num").val(parseInt(pro_num));
                $("#old_item").val(dom_id);
                ShowDiv();
            } else {
                return false;
            }
        });

        $("#toOrder").bind('click', function () {
            if ($(this).hasClass('todel')) {
                if (confirm('确定要删除选择的商品吗？')) {
                    var spec = [];
                    $('.gouxuan').each(function (index, ele) {
                        if ($(ele).find('input[name="cart_key[]"]').prop('checked')) {
                            var spec_key = $(ele).find('input[name="cart_key[]"]').val();
                            spec.push(spec_key);
                        }
                    });
                    if (spec.length < 1) {
                        Tip('请选择要删除的产品');
                        return false;
                    }
                    $.ajax({
                        url: '/ajax/cart/',
                        type: 'post',
                        dataType: 'json',
                        data: {'ajaxdata': 'delCart', 'id': spec},
                        success: function (response) {
                            if (response.code == 200) {
                                window.location.reload();
                            } else {
                                Tip('删除失败！');
                                return false;
                            }
                        },
                        beforeSend: function () {
                        }
                    });
                } else {
                    return false;
                }
            } else {
                var spec = [];
                $('.gouxuan').each(function (index, ele) {
                    if ($(ele).find('input[name="cart_key[]"]').prop('checked')) {
                        var spec_key = $(ele).find('input[name="cart_key[]"]').val();
                        spec.push(spec_key);
                    }
                });
                if (spec.length < 1) {
                    Tip('请选择要结算的产品');
                    return false;
                }
                $.ajax({
                    url: '/ajax/cart/',
                    type: 'post',
                    dataType: 'json',
                    data: {'ajaxdata': 'sendCart', 'id': spec},
                    success: function (response) {
                        layer.closeAll();
                        if (response.code == 200) {
                            var form = $("<form style='display:none;' method='post' action='<?php echo WEBROOT . '/order/index'?>'></form>");
                            $.each(response.result, function (key, value) {
                                var input = $("<input type='hidden'>");
                                input.attr({"name": key});
                                input.val(value);
                                form.append(input);
                            });
                            form.appendTo(document.body);
                            form.submit();
                        } else {
                            Tip(response.message);
                            return false;
                        }
                    },
                    beforeSend: function () {
                        layer.load(1);
                    }
                });
            }
        })
    })

</script>